<template>
    <el-row class="main">
        <el-col class="padd20 posa">
            <el-col class="box box-pack-start box-align-center">
                <div class="btn tab">
                    <el-input placeholder="搜索" style="margin: 0 5px;" v-model="searchtext">
                        <i slot="suffix" class="el-input__icon el-icon-search cp" @click.stop="listSchoolTr()"></i>
                    </el-input>
                    <!-- <el-button class="reset-comfirm-btn" @click="invitTeacher" style="display: flex;align-items: center;">
                        <img style="width: 25px;height: 25px;line-height: 25px;" src="https://yh-sys.oss-cn-beijing.aliyuncs.com/18A715E7DB74475E9B9CA212E47AC020%E5%BE%AE%E4%BF%A1%20%281%29.png?Expires=4788226325&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=cbzKumqbgJzGMQm%2Fiiv64fNjgSA%3D" />
                        <span style="margin: 0px 0px 10px 12px;top: 33px;position: absolute;">邀请</span>
                    </el-button> -->
                    <el-button class="reset-comfirm-btn" @click="dialogVisible = true"
                        style="margin-right: 7px;">+添加</el-button>
                    <el-upload class="upload-demo" :action="truploadfileurl" :data="upData" :show-file-list="false" multiple
                        :on-success="success" :before-upload="beforeUpload">
                        <el-button class="reset-comfirm-btn">excel导入</el-button>
                    </el-upload>
                    <el-link :href="trmburl" type="primary" style="width: 150px;">下载模板
                    </el-link>
                </div>
            </el-col>
            <el-col class="mt20 tab">
                <el-table :data="trpage.list" height="579" stripe
                    :header-cell-style="{ background: '#F0F1F8', color: '#2F3142' }" border v-loading="loading"
                    element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.1)">
                    <el-table-column label="序号" width="80px" fixed align="center">
                        <template slot-scope="scope">
                            {{ (trpage.pageNum - 1) * trpage.pageSize + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="100" align="center"></el-table-column>
                    <el-table-column prop="mobile" label="手机号" width="110" align="center"></el-table-column>
                    <el-table-column prop="userCode" label="账号" width="110" align="center"></el-table-column>
                    <el-table-column prop="zgh" label="职工号" min-width="150" align="center"></el-table-column>
                    <el-table-column prop="sfzh" label="身份证号" min-width="180" align="center"></el-table-column>
                    <!--                    <el-table-column label="数据来源" width="200" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.datafrom==1">数据中心</span>
                            <span v-if="scope.row.datafrom==2">Excel导入</span>
                            <span v-if="scope.row.datafrom==3">平台添加</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="操作" align="center" width="260" fixed="right">
                        <template slot-scope="scope">
                            <el-col class="box box-pack-center box-align-center">
                                <!-- <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteTr(scope.row)"></el-button> -->
                                <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                                <el-button v-if="maxrole == 'admin'" size="mini" type="danger"
                                    @click="handleDelete(scope.row)">删除</el-button>
                                <el-button size="mini" type="primary" @click="handleResetPassword(scope.row)">重置密码
                                </el-button>
                            </el-col>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col class="mt20">
                    <el-pagination @current-change="listSchoolTr" background layout="prev, pager, next"
                        :total="trpage.total" :current-page="trpage.pageNum" hide-on-single-page></el-pagination>
                </el-col>
            </el-col>
        </el-col>

        <el-dialog title="添加教师信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="addform" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入老师姓名"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="mobile">
                    <el-input v-model="form.mobile" placeholder="请输入账号"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addtr">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="邀请老师" :visible.sync="appletDialogVisible" width="30%">
            <div style="height: 300px;">
                <div style="width: 100%;margin-bottom: 20px;">
                    <el-image style="width: 200px;height: 200px;" :src="'data:image/png;base64,' + codeUrl">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-loading" style="font-size: 36px;margin-top: 50px;"></i>
                        </div>
                    </el-image>
                </div>
                <span class="mt10" style="font-size: 15px;color: rgb(34 95 205);">请打开微信扫一扫<br></span>
                <span class="mt10" style="font-size: 15px;color: rgb(34 95 205);">进入劳动教育云小程序邀请老师加入~</span>
            </div>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="show">
            <el-form :model="forms">
                <el-form-item label="姓名">
                    <el-input v-model="forms.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="forms.userCode" autocomplete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="昵称">
                    <el-input v-model="forms.nickName" autocomplete="off"></el-input>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>

<script>
import minxins from "@/utils/exportStudent";
import {
    v4 as uuidv4
} from 'uuid';

export default {
    mixins: [minxins],
    data() {
        return {
            loading: false,
            trmburl: 'https://yhlyy.oss-cn-beijing.aliyuncs.com/7BF0D54B135A4083A88E1469E2877FF9%E6%95%99%E5%B8%88%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xls?Expires=4785463465&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=fDc1c4AwVERtJV0ilPav4mQdRvM%3D',
            loginInfo: this.$store.state.loginInfo,
            upData: {
                schoolid: this.$store.state.schoolId
            },
            truploadfileurl: this.$url.baseURL + "/dteacher/impExcelTr",
            schoolid: this.$store.state.schoolId,
            schoolname: this.$store.state.schoolName,
            user: this.$store.state.user,
            trpage: {
                total: 0,
                pageSize: 10,
                pageNum: 1,
                list: []
            },
            searchtext: '',
            dialogVisible: false,
            appletDialogVisible: false,
            form: {
                name: '',
                userCode: '',
                schoolid: this.$store.state.schoolId,
                mobile: ''
            },
            maxrole: this.$store.state.maxRole,
            forms: {
                name: '',
                nickName: '',
                userCode: '',
            },
            show: false,
            rules: {
                name: [{
                    required: true,
                    message: '请输入老师名称',
                    trigger: 'blur'
                },
                {
                    min: 2,
                    max: 50,
                    message: '长度在 2 到 50 个字符',
                    trigger: 'blur'
                }
                ],
                mobile: [{
                    required: true,
                    message: '请输入手机号',
                    trigger: 'blur'
                },
                {
                    min: 11,
                    max: 11,
                    message: '长度在 11 个字符',
                    trigger: 'blur'
                }
                ],
            },
            codeUrl: '',
        };
    },
    mounted() {
        this.listSchoolTr();
        // console.log(this.maxRole,'-----------------')
    },
    methods: {
        listSchoolTr(pageNum) {
            this.loading = true;
            let params = {
                schoolid: this.schoolid,
                pageNum: pageNum,
                searchtext: this.searchtext
            };
            this.$ajax.post('/dteacher/schoolTrList', params).then(res => {
                this.loading = false;
                if (res.code == '0') {
                    console.log(res.list);
                    this.trpage = res.list;
                }
            })
        },
        handleDeleteTr(item) {
            let params = {
                schoolid: this.schoolid,
                acc: item.userCode,
                mobile: item.mobile
            };
            this.$confirm('确定将' + item.name + '删除吗？确定之后用户将并不能登录。', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.Admin.delTeacher(params).then(res => {
                    if (res.code == '0') {
                        this.$message.success('删除成功！');
                        this.listSchoolTr();
                    }
                })
            }).catch(() => { });
        },
        save() {
            let url = "/sysuser/modify"
            let params = {
                name: this.forms.name,
                // nickName: this.forms.nickName,
                userCode: this.forms.userCode,
                id: this.UserId
            }
            this.$ajax.post(url, params).then(res => {
                if (res.code == '0') {
                    this.$message.success('保存成功！');
                    this.listSchoolTr();
                    this.show = false
                    if (this.$store.getters.getMaxRole == 'admin') {
                        let user = this.$store.getters.getUser
                        user.name = this.forms.name
                        this.$store.commit('setUser', user)
                    }
                }
            })
        },
        handleEdit(item) {
            console.log(item);
            this.show = true;
            this.UserId = item.id
            this.forms.name = item.name
            this.forms.userCode = item.userCode
            this.forms.nickName = item.nickName
        },
        // 删除
        handleDelete(item) {
            // console.log(item.id, '删除id')
            let params = {
                schoolid: this.schoolid,
                acc: item.userCode,
                mobile: item.mobile
            };
            this.$confirm('确定将' + item.name + '删除吗？确定之后用户将并不能登录。', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.Admin.delTeacher(params).then(res => {
                    if (res.code == '0') {
                        this.$message.success('删除成功！');
                        this.listSchoolTr();
                    }
                })
            }).catch(() => { });
        },
        beforeUpload(file) {
            const fileName = file.name;
            const index = fileName.lastIndexOf(".");
            const ext = fileName.substr(index + 1);
            const arr = ["xls", "xlsx"];
            const isOk = arr.includes(ext);
            if (!isOk) {
                this.$message.warning('导入模板应为xls/xlsx格式！');
                return false;
            }
        },
        success(res) {
            if (res.errinfo == "") {
                this.listSchoolTr();
                this.$message.success("导入成功")
            } else {
                this.$message.error(res.errinfo)
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        addtr() {
            this.$refs['addform'].validate((valid) => {
                if (valid) {
                    this.$ajax.post('/dteacher/addtr', this.form).then(res => {
                        if (res.result == 'mobileExist') {
                            this.$message.error('该手机号已存在！');
                        } else {
                            this.$message.success('添加成功！');
                            this.listSchoolTr();
                            this.dialogVisible = false;
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        creatQrCode() {
            let token = this.$md5(uuidv4() + new Date().toLocaleString());
            console.log(token)
            console.log(this.schoolid)
            console.log(this.user)
            this.$ajax.post('/comm/getInviteErWeiCode', {
                scene: encodeURIComponent(token),
                schoolid: encodeURIComponent(this.schoolid),
                uid: encodeURIComponent(this.user.id),
                type: 'tr'
            }).then(rs => {
                this.codeUrl = rs.url;
            })
        },
        invitTeacher() {
            this.appletDialogVisible = true;
            this.creatQrCode();
        }
    }
}
</script>

<style scoped lang="scss">
.main {
    position: relative;
    height: 100%;
}

.posa {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
    background-color: #fff;

    h3 {
        font-size: 18px;
    }

    .label {
        display: block;
        width: 76px;
        height: 40px;
        line-height: 40px;
        font-weight: 600;
        font-size: 15px;
        margin-right: 10px;
    }

    .btn {
        // width: 120px;
        // height: 36px;
        // line-height: 36px;
        // background: #F3F4FB;
        // border: 1px solid #626BF1;
        // color: #626BF1;
        // border-radius: 10px;
        // cursor: pointer;
        // font-size: 16px;
        display: flex;
    }
}

.tab {
    // padding: 0 85px;
}

.height {
    height: 100%;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.delete-btn {
    display: block;
    padding: 3px 5px;
    width: 64px;
    height: 24px;
    line-height: 24px;
    background: linear-gradient(-13deg, #F97762, #F89F9F);
    border-radius: 12px;
    color: #fff;
}
</style>
